<template>
    <div class="modify-dialog">
        <slot>
            <el-button size="small" type="primary" @click="showDialog()">
                新增记录
            </el-button>
        </slot>
        <el-dialog :close-on-click-modal="false" v-bind="dialogOpts" :visible.sync="dialogVisible">
            <Form v-bind="formOpts" v-on="formEvent">
                <template #formBtn>
                    <div class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="onConfirm"> 确 定 </el-button>
                    </div>
                </template>
            </Form>
        </el-dialog>
    </div>
</template>

<script>
import modifyMixins from "@/mixins/modifyMixins.vue";
import dayjs from "dayjs";
import ProductInput from "./ProductInput.vue";

export default {
    mixins: [modifyMixins],
    components: {
        ProductInput,
    },
    data() {
        return {
            dialogTitle: "新增记录",
            labelPosition: "left",
            dialogWidth: "700px",
            dialogTop: "8vh",
            form: {
                orderId: {
                    tag: "el-select",
                    label: "门店",
                    value: "",
                    items: [],
                    props: {
                        filterable: true,
                        clearable: true,
                        placeholder: "请选择门店",
                    },
                },
                label: {
                    tag: "el-select",
                    label: "费用类型",
                    value: [],
                    items: [],
                    props: {
                        clearable: true,
                        placeholder: "请选择费用类型",
                    },
                },
                amount: {
                    tag: "el-input-number",
                    label: "费用",
                    value: "",
                    props: {
                        min: 0,
                        precision: 2,
                        clearable: true,
                        placeholder: "请输入费用",
                    },
                },
                imgs: {
                    tag: "Uploader",
                    label: "费用图片",
                    value: [],
                    props: {},
                },
            },
        };
    },
    methods: {
        showDialog(modify = "add", row = {}) {
            this.dialogVisible = true;
            this.row = row;
            this.modify = modify || "add";
            for (const key in this.form) {
                let defValue = "";
                if (Array.isArray(this.form[key].value)) defValue = [];
                if (Object.hasOwnProperty.call(row, key))
                    this.form[key].value = row[key] || defValue;
                else this.form[key].value = defValue;
            }
            this.form.label.items = this.$store.state.storeLedgerType
            this.form.orderId.items = this.$store.state.storeLedgerTypeStore
            this.formKey = this.$quinn.guid();
        },
        onSubmit(form) {
            const { modify, row } = this;
            const { label, amount, imgs, orderId } = form
            if (!orderId || !label || !amount) return this.$message.info("请检查输入项");
            form.item = {
                label,
                value: {
                    amount,
                    imgs
                }
            }
            this.$api["newStoreLedgerCreate"](form).then(this.submitDoneMsg);
        },
    },
};
</script>

<style lang="less" scoped></style>

